<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>晚风后台控制面板</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="/js/vue.js"></script>
    <script src="/js/axios.js"></script>
</head>



<body>
    <nav class="navbar navbar-inverse" role="navigation">
        <div id="apc" class="container-fluid">
            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a class="icon-bar" href="#">晚风后台控制面板</a>
                    </li>
                    <li><a href="/html/Admin/AdminArticle.html">留言</a>
                    </li>
                    <li><a href="/html/Admin/Adminuser.html">用户</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a>欢迎您{{name}}</a>
                    </li>
                    <li><a href="javascript:void(0)" @click="walkout">安全退出</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>


    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-2" id="menulist">
                <a href="#" class="list-group-item active" onclick="loadPage('../Admin/WelcomeAdmin.html')">
                    <!-- 小图标样式设置 -->
                    首页</a>
                <a href="#" class="list-group-item" onclick="loadPage('../Admin/AdminArticle.html')">
                    留言管理 </a>
                <a href="#" class="list-group-item" onclick="loadPage('../Admin/Adminuser.html')">
                    用户管理</a>
            </div>
            <!--左边菜单栏-->
            <div class="col-sm-10" id="right">
                <ol class="breadcrumb">
                    <li class="active">菜单
                    </li>
                    <li class="active">大屏幕
                    </li>
                </ol>



                <div class="container">
                    <div class="row clearfix">
                        <div class="col-sm-11 column">

                            <div class="jumbotron">
                                <h1>
                                    linson admin
                                </h1>
                                <p>
                                    Linson开源作品
                                </p>
                                <p>
                                    <a class="btn btn-primary btn-large" href="#">Learn more</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <ul class="pagination" style="float: right;">
                    <li><a href="#">&laquo;</a>
                    </li>
                    <li class="active"><a href="#">1</a>
                    </li>
                    <li class="disabled"><a href="#">2</a>
                    </li>
                    <li><a href="#">3</a>
                    </li>
                    <li><a href="#">4</a>
                    </li>
                    <li><a href="#">5</a>
                    </li>
                    <li><a href="#">&raquo;</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 底部页脚部分 -->
    <div class="footer">
        <p class="text-center">
            2019 &copy; mylastday.
        </p>
    </div>
</body>
<script>
    /*
     * 对选中的标签激活active状态，对先前处于active状态但之后未被选中的标签取消active
     * （实现左侧菜单中的标签点击后变色的效果）
     */
    $(document).ready(function () {
        $('#menulist> a').click(function (e) {
            //e.preventDefault();    加上这句则导航的<a>标签会失效
            $('#menulist> a').removeClass('active');
            $(this).addClass('active');
        });
    });


    function loadPage(url) {
        $.get(url, function (data, status) {
            $("#right").html(data);
        });
    }


    new Vue({
        el: "#apc",
        data: {
            name: '未获取到名字'
        },
        created() {
           let admin = window.localStorage.getItem('name');
           this.name=admin;
        },
        methods: {
            walkout() {

                localStorage.removeItem('token');
                localStorage.removeItem('name');
                location.href = '../Admin/adminlogin.html';
                // location.href = window.location.href;

            },
        }

    })
</script>

</html>>